<template>
  <div class="container">
    <div v-if="isShow" class="main">
      <ActionBar @search-click="handleSearchClick" />
      <Table
        :tableData="processDeploymentList"
        :loading="tableLoading"
        @setting-icon-click="handleSettingIconClick"
        @setting-form-click="handleSettingFormClick"
        @success="getProcessDefinitionList"
      />
      <el-pagination
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
      />
      <IconDiglog
        :show.sync="iconDialogVisible"
        :data="processDefinition"
        @success="getProcessDefinitionList"
      />
      <FormDiglog
        :show.sync="formDialogVisible"
        :data="processDefinition"
        @success="getProcessDefinitionList"
      />
    </div>
    <router-view v-else />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
import IconDiglog from './components/IconDiglog'
import FormDiglog from './components/FormDiglog'
import FlowDesignService from '../../../service/flow_design'
import { loadingType } from '../../../common/js/constant'
import { isUrlFinallyParameter } from '../../../utils'

export default {
  components: {
    ActionBar,
    Table,
    IconDiglog,
    FormDiglog
  },
  data() {
    return {
      form: {},
      processDeploymentList: [],
      processDefinition: {},
      iconDialogVisible: false,
      formDialogVisible: false
    }
  },
  computed: {
    isShow() {
      return isUrlFinallyParameter('flow_design')
    }
  },
  mounted() {
    this.getProcessDefinitionList()
  },
  methods: {
    getProcessDefinitionList() {
      const { form, pageNum, pageSize } = this
      const result = FlowDesignService.getProcessDefinitionListByCondition(
        form,
        pageNum,
        pageSize
      ).then(res => {
        const { list, total } = res.data
        this.total = total
        this.processDeploymentList = list
      })
      this.loadingAspect(result, loadingType.TABLE)
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getProcessDefinitionList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getProcessDefinitionList()
    },
    // 处理搜索点击事件
    handleSearchClick(form) {
      this.form = form
      this.getProcessDefinitionList()
    },
    // 处理设置流程图标事件
    handleSettingIconClick(value) {
      this.processDefinition = value
      this.iconDialogVisible = true
    },
    // 处理设置流程表单事件
    handleSettingFormClick(value) {
      this.processDefinition = value
      this.formDialogVisible = true
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  .main
    padding 20px
    box-sizing border-box
    .pagination
      margin-top 20px
      text-align right
</style>
